<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2020-06-30
  Time: 14:37
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="path" value="${pageContext.request.contextPath}"></c:set>
<c:set var="scheme" value="${pageContext.request.scheme}"></c:set>
<c:set var="serverName" value="${pageContext.request.serverName}"></c:set>
<c:set var="serverPort" value="${pageContext.request.serverPort}"></c:set>
<c:set var="basePath" value="${scheme}://${serverName }:${serverPort }${path }/">
</c:set>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <base href="${bathPath }">
    <title>Spark考核</title>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <link rel="stylesheet" href="css/mainStyle.css" type="text/css" media="all">
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts.min.js"></script>
    <%--<script src="http://echarts.baidu.com/build/dist/echarts.js"></script>--%>
</head>
</head>
<body>
<ul>
    <li><a href="index.jsp">电影列表</a></li>
    <li><a href="scoreBar.jsp">电影平均分</a></li>
</ul>
<%
    String movieID = request.getParameter("movieID");
%>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="main" style="width: 85%;height:85%; margin-left:8%;margin-top:5%;"></div>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    var xData = [];
    var yData = [];
    window.onload = function () {
        initDatas();
    }

    function initDatas() {
        $.ajax({
            type: "POST",
            url: "/RatingServlet",
            dataType: 'json',
            data: {"movieID": <%=movieID%>},
            async: false,
            success: function (result) {
                y = result[0].yData;
                x = result[1].xData;
            }
        })
        // 使用刚指定的配置项和数据显示图表。
        var option = myChart.getOption();
        option.xAxis[0].data = x;
        option.series[0].data = y;
        myChart.setOption(option, true);

    }

    option = {
        title: {
            text: '动态打分折线图'
        },
        tooltip: {
            trigger: 'axis',
            formatter: function (params) {
                params = params[0];
                var date = new Date(params.name);
                return date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate() + ' ' + date.getHours() + ':' + date.getMinutes() + ':' + date.getMilliseconds() + ':' + '<br/>' + '平均分为' + params.value;
            },
            axisPointer: {
                animation: false
            }
        },
        xAxis: {
            type: 'category',
            data: xData
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: yData,
            type: 'line'
        }]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    var x = [];
    var y = [];
    setInterval(initDatas, 1000);


</script>
</body>
</html>
